<template>
  <section class="page">
    <headerbar>添加会议</headerbar>

    <section class="inner-content">
      <ul class="line-tab">
        <li @click="clickMenu(0)" :class="{'active':data.tabIndex==0}"><span>会议基本信息</span></li>
        <li @click="clickMenu(1)" :class="{'active':data.tabIndex==1}"><span>会议附件</span></li>
      </ul>

      <section v-if="!data.tabIndex || data.tabIndex!=1">
        <div v-if="showTypes === '2'" class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>类型：</div>
          <div class="value"><input readonly v-model="data.typeLabel" type="text" placeholder="请选择会议类型"></div>
        </div>
        <div v-if="showTypes === '2'" class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>子类型：</div>
          <div class="value"><input readonly v-model="data.subTypeLabel" type="text" placeholder="请选择子类型"></div>
        </div>
        <div v-if="showTypes !== '2'" class="text-block" @click="go('scheduleTypes')">
          <div class="name color-default input-name"><i class="required color-red">*</i>类型：</div>
          <div class="value"><input readonly v-model="data.typeLabel" type="text" placeholder="请选择会议类型"></div>
        </div>
        <div v-if="hasShyk() && showTypes !== '2'" class="text-block" @click="showSubType()">
          <div class="name color-default input-name"><i class="required color-red">*</i>子类型：</div>
          <div class="value"><input readonly v-model="data.subTypeLabel" type="text" placeholder="请选择子类型"></div>
        </div>
        <div v-if="false" class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>范围：</div>
          <div class="value"><input readonly type="text" placeholder="请选择范围"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>主题：</div>
          <div class="value"><input type="text" placeholder="请输入主题" v-model="data.theme"></div>
        </div>
        <div class="text-block" @click="isConcentrated()">
          <div class="name color-default input-name"><i class="required color-red">*</i>学习方式：</div>
          <div class="value"><input readonly type="text" placeholder="请选择学习方式" v-model="data.concentratedLabel"></div>
        </div>
        <div v-if="false" class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>创建人：</div>
          <div class="value"><span class="mine-lists-content">张三</span></div>
        </div>
        <div class="text-block" @click="selectPerson('attendUserName')">
          <div class="name color-default input-name"><i class="required color-red">*</i>参与人员：</div>
          <div class="value"><input readonly type="text" placeholder="请选择参与人员" v-model="data.attendUserName"></div>
        </div>
        <div class="text-block" @click="showTimePicker()">
          <div class="name color-default input-name"><i class="required color-red">*</i>会议开始时间：</div>
          <div class="value"><input readonly type="text" placeholder="请选择会议时间" v-model="data.meetStartTime"></div>
        </div>
        <div v-if="false" class="text-block" @click="showEndTimePicker()">
          <div class="name color-default input-name"><i class="required color-red"></i>会议结束时间：</div>
          <div class="value"><input readonly type="text" placeholder="请选择会议时间" v-model="data.meetEndTime"></div>
        </div>
        <div class="text-block">
          <div class="name color-default input-name"><i class="required color-red">*</i>会议地点：</div>
          <div class="value"><input type="text" placeholder="请输入会议地点" v-model="data.address"></div>
        </div>
        <div class="text-block" @click="selectPerson('compereUserName')">
          <div class="name color-default input-name"><i class="required color-red">*</i>主持人：</div>
          <div class="value"><input type="text" placeholder="请输入主持人" v-model="data.compereUserName"></div>
        </div>
        <div class="text-block" @click="selectPerson('recordEUserName')">
          <div class="name color-default input-name"><i class="required color-red">*</i>记录人：</div>
          <div class="value"><input type="text" placeholder="请输入记录人" v-model="data.recordEUserName"></div>
        </div>
        <div v-if="data.concentrated==='1'" class="text-block noborder" @click="selectDuration()">
          <div class="name color-default input-name"><i class="required color-red">*</i>学习时长：</div>
          <div class="value"><input readonly type="text" placeholder="请选择学习时长" v-model="data.durationLabel"></div>
        </div>
        <template v-if="data.concentrated==='1'">
          <div class="name color-default input-name" style="margin-left: 10px"><i class="required color-red">注意：议程有学习环节时，请对应选择时长。</i></div>
          <div class="line"></div>
        </template>


        <div class="text-block">
          <!--<div class="name  color-default input-name"><i class="required color-red">*</i>会议议程：</div>
          <div class="value">
            <textarea v-model="data.agenda" placeholder="请填写会议议程" name="" id="" cols="30" rows="5"></textarea>
          </div>-->
          <div class="input-row-wrap">
            <div class="name"><i class="required color-red">*</i>会议议程：</div>
            <textarea v-model="data.agenda" placeholder="请填写会议议程" name="" id="" cols="40" rows="10"></textarea>
            <div class="name color-default input-name"><i class="required color-red">会议议程严禁录入涉密内容</i></div>
          </div>
        </div>

      </section>


      <!--会议附件-->
      <section v-if="data.tabIndex==1" >
        <div class="mgt-10 color-tip mgb-1"><i class="required color-red">严禁上传或录入涉密内容</i></div>
        <div class="mgt-10 color-tip mgb-1">添加附件</div>
        <cube-upload ref="upload"
                     action=""
                     v-model="files"
                     accept="image/*"
                     :simultaneous-uploads="1"
                     @files-added="uploadFile"
                     @file-removed="fileRemoved"
                     @input="onInput"
        />
      </section>

      <div class="mgt-10"></div>
      <div @click="checkParam($event)" v-preventReClick="1000" class="default-block-btn" v-if="data.tabIndex==0">提交</div>
      <div class="mgt-10"></div>
    </section>
  </section>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  import fileIcon from '../../../../static/images/up_document.png'

  export default {
    name: 'organizationalLifeAdd',
    data () {
      return {
        fn: tools,
        data: {
          type: '',
          subType: '',
          theme: '',
          typeLabel: '',
          attendUserId: '',
          attendUserName: '',
          compereUserId: '',
          compereUserName: '',
          recordEUserId: '',
          recordEUserName: '',
          address: '',
          meetStartTime: '',
          meetEndTime: '',
          subTypeLabel: '',
          tabIndex: 0,
          concentrated: '-1',
          concentratedLabel: '',
          duration: '',
          durationLabel: '',
          agenda: ''
        },
        files: [],
        durationList: [],
        attachmentList: [],
        showTypes: ''
      }
    },
    created () {
      let type = this.$route.params.type
      // this.data.typeLabel = this.$route.params.typeLabel
      this.loadDuration()
      if (this.$store.state.OrgLifeAddflagType) {
        this.resetData()
        this.$store.state.OrgLifeAddflagType = false
        this.showTypes = this.$route.params.showTypes
      } else {
        this.resumeData()
      }
      if (this.showTypes === '2') {
        this.data.type = 'shyk'
        this.data.subType = '3'
        this.data.typeLabel = '三会一课'
        this.data.subTypeLabel = '党小组会'
      }
    },
    methods: {
      resetData () {
        this.data = {
          type: '',
          subType: '',
          theme: '',
          typeLabel: '',
          attendUserId: '',
          attendUserName: '',
          compereUserId: '',
          compereUserName: '',
          recordEUserId: '',
          recordEUserName: '',
          address: '',
          meetStartTime: '',
          meetEndTime: '',
          subTypeLabel: '',
          tabIndex: 0,
          concentrated: '-1',
          concentratedLabel: '',
          duration: '',
          durationLabel: '',
          agenda: '',
          contents: '',
          flagType: true
        }
      },
      checkParam (e) {
        if (e.target.disabled) {
          return false
        }
        if (this.data.type === '') {
          return tools.tip('请选择会议类型！')
        }
        if (this.hasShyk() && this.data.subType === '') {
          return tools.tip('请选择子类型！')
        }
        if (this.data.theme === '') {
          return tools.tip('会议主题不能为空！')
        }
        if (this.data.attendUserId === '') {
          return tools.tip('请选择参与人员！')
        }
        if (this.data.meetStartTime === '') {
          return tools.tip('请选择会议开始时间！')
        }
        // if (this.data.meetEndTime === '') {
        //   return tools.tip('请选择会议结束时间！')
        // }
        if (this.data.compereUserId === '') {
          return tools.tip('请选择主持人！')
        }
        if (this.data.recordEUserId === '') {
          return tools.tip('请选择记录人！')
        }
        if (this.data.address === '') {
          return tools.tip('会议地点不能为空！')
        }
        // if (this.data.concentrated === '-1') {
        //   return tools.tip('请选择学习方式！')
        // }
        if (this.data.concentrated === '1' && this.data.durationLabel === '') {
          return tools.tip('请选择学习时长！')
        }
        if (this.data.agenda === '') {
          return tools.tip('输入会议议程！')
        }

        let _this = this
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '确认会议信息，是否进行提交？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            _this.submit()
          },
          onCancel: () => {
          }
        }).show()
      },
      submit () {
        let addFiles = {
          addFiles: this.attachmentList
        }
        console.log('attachmentList={}', JSON.stringify(this.attachmentList))
        let strFiles = JSON.stringify(addFiles)
        let data = {
          loginId: '3750',
          orgLifeId: '',
          type: this.data.type,
          subType: this.data.subType,
          theme: this.data.theme,
          startTime: this.data.meetStartTime,
          // endTime: this.data.meetEndTime,
          address: this.data.address,
          hosterId: this.data.compereUserId,
          recorderId: this.data.recordEUserId,
          wayFlag: this.data.concentrated,
          duration: this.data.duration,
          agenda: this.data.agenda,
          userIds: this.data.attendUserId,
          annexInfo: strFiles
        }
        loginService.optSaveOrgLifeV2(data).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          } else {
            // tools.tip('保存成功')
            this.$store.state.organizationalLifeAdd = res.data
            this.$router.replace({'name': `sendNotice`})
          }
        })
      },
      // 选择会议类型
      showType () {
        this.$createActionSheet({
          title: '会议类型',
          active: 10,
          data: [
            {
              scope: 'shyk',
              content: '三会一课'
            },
            {
              scope: 'ztdr',
              content: '主题党日'
            },
            {
              scope: 'mzpy',
              content: '民主评议'
            }
          ],
          onSelect: (item, index) => {
            this.data.typeLabel = item.content
            this.data.type = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 选择会议子类型
      showSubType () {
        let subTypes
        if (this.data.type.includes('mzpy') || this.data.type.includes('ztdr')) {
          subTypes = [
            {
              scope: '1',
              content: '支部党员大会'
            },
            {
              scope: '4',
              content: '党课'
            }
          ]
        } else {
          subTypes = [
            {
              scope: '1',
              content: '支部党员大会'
            },
            {
              scope: '2',
              content: '支部委员会'
            },
            {
              scope: '3',
              content: '党小组会'
            },
            {
              scope: '4',
              content: '党课'
            }
          ]
        }
        this.$createActionSheet({
          title: '会议子类型',
          active: 10,
          data: subTypes,
          onSelect: (item, index) => {
            this.data.subTypeLabel = item.content
            this.data.subType = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 选择人员
      selectPerson (modelName) {
        this.storeData()
        // fromOrg表示从组织生活进入
        if (modelName === 'compereUserName' || modelName === 'recordEUserName') {
          return this.$router.push({path: `/personnelSelection/${modelName}`, query: {isRadio: 1, fromOrg: 1}})
        }
        this.$router.push({path: `/personnelSelection/${modelName}`, query: {fromOrg: 1}})
      },
      storeData () {
        this.$store.state.organizationalLifeAddData = this.data
      },
      clearStore () {
        delete this.$store.state.organizationalLifeAddData
      },
      resumeData () {
        if (this.$store.state.organizationalLifeAddData) {
          this.data = this.$store.state.organizationalLifeAddData
        }
        if (this.$store.state.scheduleTypeSelected) {
          let arrNames = []
          let arrKeys = []
          this.$store.state.scheduleTypeSelected.forEach((v) => {
            arrKeys.push(v.value)
            arrNames.push(v.name)
          })
          this.data.typeLabel = arrNames.join(',')
          this.data.type = arrKeys.join(',')
          console.log('------------type=', this.data.type)
        }
      },
      // 会议时间格式：2019-12-06 21:48:00 精确到分
      showTimePicker () {
        this.$createTimePicker({
          showNow: true,
          minuteStep: 1,
          delay: 1,
          min: new Date(),
          day: {
            len: 90,
            filter: ['今天', '明天'],
            format: 'M月d日'
          },
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.data.meetStartTime = moment(selectedTime).format('YYYY-MM-DD HH:mm')
            this.$forceUpdate()
          }
        }).show().setTime(parseInt(moment().format('x')))
      },
      // 会议时间格式：2019-12-06 21:48:00 精确到分
      showEndTimePicker () {
        this.$createTimePicker({
          showNow: true,
          minuteStep: 1,
          delay: 1,
          min: new Date(),
          day: {
            len: 90,
            filter: ['今天', '明天'],
            format: 'M月d日'
          },
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.data.meetEndTime = moment(selectedTime).format('YYYY-MM-DD HH:mm')
            this.$forceUpdate()
          }
        }).show().setTime(parseInt(moment().format('x')))
      },
      // 学习方式
      isConcentrated () {
        this.$createActionSheet({
          title: '学习方式',
          active: 10,
          data: [
            {
              scope: '1',
              content: '线下'
            },
            {
              scope: '2',
              content: '线上'
            }
          ],
          onSelect: (item, index) => {
            if (item.scope === '2') {
              tools.alert('目前暂时只支持线下学习方式')
            } else {
              this.data.concentratedLabel = item.content
              this.data.concentrated = item.scope
            }
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      // 选择学习时长
      selectDuration () {
        this.$createActionSheet({
          title: '选择学习时长',
          active: 10,
          data: this.durationList,
          onSelect: (item, index) => {
            this.data.durationLabel = item.content
            this.data.duration = item.scope
            this.$forceUpdate()
          },
          onCancel: () => {
          }
        }).show()
      },
      loadDuration () {
        this.durationList = []
        let data = {
          loginId: '112030'
        }
        loginService.durationList(data).then((res) => {
          if (res.code === 0) {
            res.data.map((v, i) => {
              let data = {
                scope: v.value,
                content: v.label
              }
              this.durationList.push(data)
            })
          }
        })
      },
      makeStr (arr) {
        return JSON.stringify(arr)
        let arrImg = []
        arr.forEach((v) => {
          arrImg.push(`{'fileid':'${v.fileid}', 'type':'1'}`)
        })
        return `[${arrImg.join(',')}]`
      },
      // 删除文件
      fileRemoved (file) {
        this.attachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      uploadFile (file) {
        console.log('----------name=' + file)
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.o_upload(formData).then((res) => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.attachmentList.push({
            'fileid': res.data.fileId,
            'filename': uploadFile.name,
            'totalBytes': res.data.totalBytes,
            'type': '1'
          })
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      go (name) {
        this.$router.push({name: name})
      },
      hasShyk () {
        return this.data.type.indexOf('shyk') !== -1
      },
      clickMenu (current) {
        this.data.tabIndex = current
      }
    }
  }
</script>

<style scoped>

</style>
